<html>
<head>
<style>
.sss{
position:absolute;
left:100px;
top:20px;
display:none;
   border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#search').live(
'focusin',function(){
$(this).css({ color: "#000", background: "#eee" ,border:"1px solid #ccc;"});
if($(this).val()=='搜索...')$(this).val('');
}
).live(
'focusout',function(){
$(this).css({ color: "#000", background: "#fff" ,border:"1px solid #ddd;"});
if($(this).val()=='')$(this).val('搜索...');
}
).live('keyup', function(event){
		   if (event.keyCode=="13"){
			$(this).hide(500);
		   }
});
  $("button").click(function(){
   if(!$('#search').length)
	{
	   var input='<input id="search" class="sss" type="text" value="搜索..."/>';
		$(input).appendTo("p");
	}
	$('#search').show('fast');
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>
